<template>
  <common-page title="查看报告">
    <el-button slot="header" @click="$emit('close')">返回</el-button>
    <div class="execution-history-overview-wrap" slot="content" ref="ssessment">
      <div class="column-divided"></div>
      <div class="grid-column-1">
        <div class="security-ssessment" v-loading="loading1">
          <div
            class="security-ssessment-img"
            :style="{ zoom: transform }"
            v-if="isBaseInfo"
          >
            <div class="security-ssessment-img-title">接口安全评估报告</div>
            <div class="security-ssessment-img-prompt">
              感谢您使用接口安全服务，我们已为您持续防护
            </div>
            <div class="security-ssessment-img-sky">
              <div
                style="
                  border: 3px solid #ffff00;
                  border-radius: 18px;
                  display: flex;
                  align-items: center;
                  padding: 0 18px;
                "
              >
                <span class="security-ssessment-img-sky-num">{{
                  baseInfo.PROTECT_DAYS
                }}</span
                ><span class="security-ssessment-img-sky-sky">天</span>
              </div>
            </div>
            <div class="security-ssessment-img-url">
              URL：{{ baseInfo.url }}
            </div>
            <div class="security-ssessment-img-system">
              业务系统：{{ baseInfo.business_name }}
            </div>
            <div class="security-ssessment-img-time">
              报告时间：{{ baseInfo.report_begin_time }} ~
              {{ baseInfo.report_end_time }}
            </div>
          </div>
          <div
            class="chart-tooltip"
            :style="{ zoom: transform, width: '1197px', height: '300px' }"
            v-else
          >
            <commonIcon
              iconName="icon-wushuju"
              iconType="icon"
              :iconSize="36"
            ></commonIcon>
            <span class="tip-content">暂无数据</span>
          </div>
        </div>

        <div class="column-divided"></div>
        <div class="grid-column-2">
          <div class="chart-container" v-loading="loading2">
            <title-card title="安全得分">
              <div slot="header">
                <span class="safetyScore">{{ rank }}</span> /
                <span>{{ totalCount }}</span>
              </div>
              <div class="chart-inside-wrap" slot="content">
                <base-chart
                  :option="dataset1"
                  v-if="dataset1.series[0].data.length"
                ></base-chart>
                <div class="chart-tooltip" v-else>
                  <commonIcon
                    iconName="icon-wushuju"
                    iconType="icon"
                    :iconSize="36"
                  ></commonIcon>
                  <span class="tip-content">暂无数据</span>
                </div>
              </div>
            </title-card>
          </div>
          <div class="chart-container" v-loading="loading3">
            <title-card title="概览">
              <div class="kpis">
                <icon-kpi :config="kpi_1"></icon-kpi>
                <icon-kpi :config="kpi_2"></icon-kpi>
                <icon-kpi :config="kpi_3"></icon-kpi>
              </div>
              <div class="kpis">
                <icon-kpi :config="kpi_4"></icon-kpi>
                <icon-kpi :config="kpi_5"></icon-kpi>
                <icon-kpi :config="kpi_6"></icon-kpi>
              </div>
            </title-card>
          </div>
        </div>
        <div class="column-divided"></div>

        <div class="grid-column-2">
          <div class="chart-container" v-loading="loading4">
            <title-chart
              type="chart-wordCloud"
              title="敏感字段"
              :dataset="dataset2"
            ></title-chart>
          </div>
          <div class="chart-container" v-loading="loading5">
            <title-chart
              type="chart-cirque"
              title="基线异常分布"
              :dataset="dataset3"
            ></title-chart>
          </div>
        </div>
        <div class="column-divided"></div>

        <div class="grid-column-2">
          <div class="chart-container" v-loading="loading6">
            <title-chart
              type="chart-bar"
              title="数据分类"
              :dataset="dataset4"
            ></title-chart>
          </div>
          <div class="chart-container" v-loading="loading7">
            <title-chart
              type="chart-line"
              title="近7日访问趋势"
              :dataset="dataset5"
            ></title-chart>
          </div>
        </div>
        <div class="column-divided"></div>

        <div class="grid-column-1">
          <div class="chart-container-1" v-loading="loading8">
            <title-card title="综合建议">
              {{ suggestion }}
            </title-card>
          </div>
        </div>
      </div>
    </div>
  </common-page>
</template>

<script>
import { mapGetters } from "vuex";
import IconKpi from "@/components/IconKpi";
import TitleChart from "@/components/EChart/TitleChart";
import commonIcon from "@/components/CommonIcon";
import BaseChart from "@/components/EChart/components/BaseChart";
import {
  getBaseInfo,
  getSecurityScore,
  getReportOverview,
  getSensitiveWords,
  getBaseLineChartData,
  getDataLevelChartData,
  getLastWeekVisitTrend,
  getSuggestion,
} from "@/api/apisecurity/report";
import { getPercent } from "@/utils/util";
export default {
  components: { TitleChart, IconKpi, commonIcon, BaseChart },
  computed: {
    ...mapGetters(["windowResize"]),
  },
  props: {
    reportId: {
      type: String,
    },
  },
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      loading7: false,
      loading8: false,
      rank: 0,
      totalCount: 0,
      baseInfo: {},
      isBaseInfo: false,
      transform: null,
      dataset1: {
        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 10,
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 10,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 16,
              color: "#999",
              fontSize: 14,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 14,
              itemStyle: {
                borderWidth: 10,
              },
            },
            title: {
              fontSize: 12,
              offsetCenter: [0, "105%"], //设置完成率位置
            },
            detail: {
              valueAnimation: true,
              fontSize: 24,
              offsetCenter: [0, "70"],
            },
            data: [],
          },
        ],
      },
      kpi_1: {
        icon: "iconfont icon-shujukuguanli",
        color: "#DF7949",
        label: "OWASP风险数",
        value: 0,
      },
      kpi_2: {
        icon: "iconfont icon-zichanzongshu",
        color: "#7D9CA1",
        label: "重要数据总数",
        value: 0,
      },
      kpi_3: {
        icon: "iconfont icon-changshangguanli",
        color: "#96C2A9",
        label: "核心数据总数",
        value: 0,
      },
      kpi_4: {
        icon: "iconfont icon-zichanxiaxianshu",
        color: "#F0B904",
        label: "脆弱性总数",
        value: 0,
      },
      kpi_5: {
        icon: "iconfont icon-gaojingzongshu1",
        color: "#F27A79",
        label: "基线异常总数",
        value: 0,
      },
      kpi_6: {
        icon: "iconfont icon-wodeliucheng1",
        color: "#DD9B81",
        label: "异常访问总数",
        value: 0,
      },
      dataset2: {
        dimensions: [],
        source: [],
      },
      dataset3: {
        dimensions: ["nameStr", "nums"],
        source: [],
        option: {
          color: ["#448ff7", "#72c240", "#e13c39"],
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["nums"]}</div>`;
            },
          },
        },
      },
      dataset4: {
        dimensions: ["type_name", "nums"],
        source: [],
        option: {
          color: ["#39a5e1"],
          yAxis: {
            name: "单位： 次",
            nameGap: 30,
          },
        },
      },
      dataset5: {
        dimensions: ["date", "正常", "异常"],
        source: [],
        option: {
          xAxis: {
            type: "category",
          },
          yAxis: {
            name: "单位:次",
            type: "value",
          },
          series: [
            {
              type: "line",
              smooth: true,
            },
          ],
        },
      },
      suggestion: "",
    };
  },
  watch: {
    windowResize: function () {
      this.resize();
    },
  },
  mounted() {
    this.resize();
    this.getBaseInfoList();
    this.getSecurityScoreList();
    this.getReportOverviewList();
    this.getSensitiveWordsList();
    this.getBaseLineChartDataList();
    this.getDataLevelChartDataList();
    this.getLastWeekVisitTrendList();
    this.getSuggestionList();
  },
  methods: {
    //综合建议
    getSuggestionList() {
      this.loading8 = true;
      getSuggestion({ id: this.reportId })
        .then((res) => {
          if (res && res.code === 200) {
            this.suggestion = res.msg;
          } else {
            this.suggestion = "";
          }
        })
        .finally(() => {
          this.loading8 = false;
        });
    },
    //查询报告近七日访问  (折线图)
    getLastWeekVisitTrendList() {
      this.loading7 = true;
      getLastWeekVisitTrend({ id: this.reportId })
        .then((res) => {
          if (res && res.code === 200) {
            this.dataset5.source = res.data.reduce((r, c) => {
              r.push({ 正常: c.normal, 异常: c.exception, date: c.date });
              return r;
            }, []);
          } else {
            this.dataset5.source = [];
          }
        })
        .finally(() => {
          this.loading7 = false;
        });
    },
    //查询报告数据分类 (柱状图)
    getDataLevelChartDataList() {
      this.loading6 = true;
      getDataLevelChartData({ id: this.reportId })
        .then((res) => {
          if (res && res.code === 200) {
            this.dataset4.source = res.data;
          } else {
            this.dataset4.source = [];
          }
        })
        .finally(() => {
          this.loading6 = false;
        });
    },
    // 查询报告基线异常分布(饼图)
    getBaseLineChartDataList() {
      this.loading5 = true;
      getBaseLineChartData({ id: this.reportId })
        .then((res) => {
          if (res && res.code === 200) {
            if (res.data && res.data.totalNums) {
              this.dataset3.source = res.data.list.reduce((r, c) => {
                r.push({
                  nameStr: c.nameStr,
                  nums: parseFloat(c.nums),
                });
                return r;
              }, []);

              let _this = this;
              this.dataset3.option.legend.formatter = function (name) {
                let passSource = null;
                let passSourcecount = 0;
                let count = null;
                _this.dataset3.source.forEach((item) => {
                  passSourcecount = passSourcecount + item.nums;
                  if (item.nameStr == name) {
                    passSource = item.nameStr + " | ";
                    count = " " + item.nums;
                  }
                });
                passSource =
                  passSource + getPercent(count, passSourcecount) + count;

                return passSource;
              };
            }
          } else {
            this.dataset3.source = [];
          }
        })
        .finally(() => {
          this.loading5 = false;
        });
    },
    //敏感词列表（词云图）
    getSensitiveWordsList() {
      this.loading4 = true;
      getSensitiveWords({ id: this.reportId })
        .then((res) => {
          if (res && res.code === 200) {
            this.dataset2.source = res.data.reduce((r, c) => {
              r.push({ name: c.word_name, value: c.nums });
              return r;
            }, []);
          } else {
            this.dataset2.source = [];
          }
        })
        .finally(() => {
          this.loading4 = false;
        });
    },
    //概览信息
    getReportOverviewList() {
      this.loading3 = true;
      getReportOverview({ id: this.reportId })
        .then((res) => {
          if (res && res.code === 200) {
            this.kpi_1.value = res.data.risk_num;
            this.kpi_2.value = res.data.tag_num;
            this.kpi_3.value = res.data.core_num;
            this.kpi_4.value = res.data.vulnerability_num;
            this.kpi_5.value = res.data.baseline_num;
            this.kpi_6.value = res.data.visit_num;
          } else {
            this.kpi_1.value = 0;
            this.kpi_2.value = 0;
            this.kpi_3.value = 0;
            this.kpi_4.value = 0;
            this.kpi_5.value = 0;
            this.kpi_6.value = 0;
          }
        })
        .finally(() => {
          this.loading3 = false;
        });
    },
    //安全报告（仪表盘）
    getSecurityScoreList() {
      this.loading2 = true;
      getSecurityScore({ id: this.reportId })
        .then((res) => {
          if (res && res.code === 200) {
            const { rank, score, totalCount } = res.data;
            this.dataset1.series[0].data = [];
            this.dataset1.series[0].data.push({
              value: score,
              name: "说明：评分在0-30分为高风险，31-70为中风险，71-100为低风险",
            });
            this.rank = rank;
            this.totalCount = totalCount;
          } else {
            this.dataset1.series[0].data = [];
            this.rank = 0;
            this.totalCount = 0;
          }
        })
        .finally(() => {
          this.loading2 = false;
        });
    },
    //查看报告基本信息
    getBaseInfoList() {
      this.loading1 = true;
      getBaseInfo({ id: this.reportId })
        .then((res) => {
          if (res && res.code === 200) {
            this.baseInfo = res.data;
            this.isBaseInfo = true;
          } else {
            this.baseInfo = {};
            this.isBaseInfo = false;
          }
        })
        .catch((err) => {
          this.baseInfo = {};
          this.isBaseInfo = false;
        })
        .finally(() => {
          this.loading1 = false;
        });
    },
    goBack() {
      this.$emit("close");
    },
    resize() {
      this.transform = this.$refs.ssessment.offsetWidth / 1200;
    },
  },
};
</script>
<style lang="scss" scoped>
.execution-history-overview-wrap {
  width: 100%;
  overflow-y: scroll;
  height: 100%;
  background-color: #eee;
  .chart-container {
    height: 400px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
    .kpis {
      margin-top: 35px;
      display: grid;
      grid-column-gap: 36px;
      padding: 0 24px;
      grid-template-columns: 1fr 1fr 1fr;
    }
    .safetyScore {
      display: inline-block;
      height: 20px;
      padding: 0 4px;
      min-width: 30px;
      border-radius: 4px;
      background: #ee6666;
      color: #eee;
      text-align: center;
    }
  }
  .chart-container-1 {
    height: 150px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }
  .grid-column-2 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 50%;
  }

  .grid-column-1 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }
  .security-ssessment {
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #fff;
    display: flex;
    .security-ssessment-img {
      color: #fff;
      transform-origin: top left;
      background: url("../../../../assets/images/securityAssessment.png")
        no-repeat;
      background-size: 100% 100%;
      width: 1197px;
      height: 300px;
      display: flex;
      flex-direction: column;
      padding: 33px 0 0 50px;
    }
    .security-ssessment-img-title {
      font-size: 28px;
      line-height: 28px;
    }
    .security-ssessment-img-prompt {
      line-height: 18px;
      font-size: 18px;
      padding-left: 5px;
      margin-top: 22px;
    }
    .security-ssessment-img-sky {
      padding-left: 5px;
      margin-top: 22px;
      // width: 104px;
      height: 36px;
      color: #fff100;
      font-weight: normal;
      display: flex;
      .security-ssessment-img-sky-num {
        font-size: 24px;
      }
      .security-ssessment-img-sky-sky {
        width: 14px;
        line-height: 30px;
        font-size: 14px;
        margin-left: 22px;
      }
    }
    .security-ssessment-img-url {
      padding-left: 5px;
      margin-top: 22px;
      line-height: 15px;
      font-size: 15px;
    }
    .security-ssessment-img-system {
      padding-left: 5px;
      margin-top: 22px;
      line-height: 15px;
      font-size: 15px;
    }
    .security-ssessment-img-time {
      padding-left: 5px;
      line-height: 15px;
      font-size: 15px;
      margin-top: 22px;
    }
  }
}
.chart-inside-wrap {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  border-radius: 5px;
}

.chart-tooltip {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.5;

  .icon-wushuju {
    font-size: 36px;
  }

  .tip-content {
    font-size: 12px;
  }
}
</style>
